<template>
  <div class="content">
    <el-upload class="content-upload" drag action="" :auto-upload="false" accept=".png, .jpg, .jpeg" multiple
      :on-change="fileUpload" :fileList="fileList" :show-file-list="false">
      <el-icon>
        <UploadFilled />
      </el-icon>
      <div class="el-upload__text">
        将文件放在此处或<em>点击上传</em>
      </div>
    </el-upload>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import EXIF from "exif-js";
const { proxy } = getCurrentInstance();
const fileList = ref([]);

// 相机型号
let model = ref("");
// 相机品牌
let make = ref("");
// 光圈
let fNbumber = ref("");
// 快门速度
let exposureTime = ref("");
// ISO
let isoSpeedRatings = ref("");

function fileUpload(file) {
  const rawFile = file.raw;
  // 解析 EXIF 数据
  EXIF.getData(rawFile, () => {
    const exifData = EXIF.getAllTags(rawFile);
    console.log(exifData);
    model.value = exifData.Model || "未知"
    make.value = exifData.Make || "未知"
    fNbumber.value = exifData.FNumber
    exposureTime.value = exifData.ExposureTime
    isoSpeedRatings.value = exifData.ISOSpeedRatings
    console.log(model.value)
    console.log(make.value)
    console.log(fNbumber.value)
    console.log(exposureTime.value)
    console.log(isoSpeedRatings.value)
  });
}

</script>
<style scoped lang="scss">
.content {
  height: 85%;
  background-color: rgb(243 244 246);
  display: flex;
  justify-content: center;

  &-upload {
    width: 50%;
  }

}
</style>
